<template>
  <div class="downloadCenter">
    <div>
      <p class="download_title">Download Center</p>
      <div class="download_search">
        <el-autocomplete class="inline-input" @keyup.enter.native="loseFocus($event)" ref="input" clearable v-model="searchForm.file_name.value" 
         :fetch-suggestions="querySearch"  placeholder="Search Downloads"  @change="searchData" 
          @select="searchData" popper-class="autocomplete" :popper-append-to-body="false" >
           <i class="iconfont icon-search_normal" slot="prefix"  @click="searchData()"></i>
            <template slot-scope="{ item }">
              <p v-html="brightenKeyword(item.value, searchForm.file_name.value)" ></p>
            </template> 
        </el-autocomplete>
      </div>
      <div class="download_product"> 
        <p>Browse Downloads by Category</p>
        <div class="swiper" :class="{'swiperOutLen': fileTypeList.length> 8, 'swiperSelect': searchForm.file_type.value}" >
          <div :class="{'swiper_prev':true, 'disabled':curIndex == 0}" @click="(curIndex != 0 )&&slidePrev()" >
            <button type="button" class="swiper_download_btn"  >
              <i class="el-icon-arrow-left"></i>
            </button>
          </div>
          <swiper :options="swiperOption" ref="mySwiper" v-if="fileTypeList ">
            <swiper-slide v-for="(slide, index) in fileTypeList" :key="index"  :class="{'active':searchForm.file_type.value == slide.label }">
              <div @click.stop.prevent="setCurSwiperItem(slide ,index)" >
                <p class="image_bg" :style="'background-image:url('+slide.image+')'"></p>
                <p class="name">{{slide.label}}</p>
              </div>
            </swiper-slide>
          </swiper>

          <div :class="{'swiper_next':true,'disabled':curIndex == fileTypeList.length-1 }" @click="(curIndex != fileTypeList.length-1) && slideNext()">
            <button type="button" class="swiper_download_btn">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
 
        </div>
      </div>
      <div class="download_table">
        <div class="download_table_div">
          <p class="download_table_title">Document List</p>
          <el-select v-model="searchForm.file_type.value" placeholder="Category"  :popper-append-to-body="false"
          @change="searchData()"  popper-class="download_table_select">
            <el-option v-for="item in fileTypeList"  :key="item.value"  :label="item.label"  :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="table">
          <div class="table_th">
            <p class="table_name">Name</p>
            <p class="table_version">Version</p>
            <p class="table_ealease_date">Release Date</p>
            <p class="table_memory_size">Memory Size</p>
            <p class="table_category">Category</p>
            <p class="table_download">Download</p>
            <p class="table_expand"></p>
          </div>
          <div v-for="item in tableData" :key="item"  class="table_td" :class="{'details_show': item.details_show}" @click="isDetailsShow(item)">
            <div class="table_td_content">
              <p class="table_name">{{item.file_name}}</p>
              <p class="table_version">{{item.file_no}}</p>
              <p class="table_ealease_date">{{item.release_time}}</p>
              <p class="table_memory_size">{{item.file_size}}</p>
              <p class="table_category">{{item.file_type}}</p>
              <p class="table_download" @click.stop>            
                <a target="_blank" :download="item.file_name"  :href="'/api/front/file/down_load?file_url='+item.file"> <i class="iconfont icon-Download"></i></a>
              </p>
              <p class="table_expand">
                <span>         
                  <i class="iconfont icon-plus"  ></i>
                </span>
              </p>
            </div>
            
            <div class="expand_details">
              <p>{{item.file_description}}</p>
            </div>

          </div>
        </div>
        <p class="table_more" @click="getMoreData()" v-show="tableData.length<total">
          <i class="iconfont icon-plus"></i> <span>More</span>
        </p>
      </div>

    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import {fileTypeList, list, fileNameList} from '@/api/download.js'
import { setSearchParams, formatFileSize } from '@/utils/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      fileNameList:[],
      fileTypeList: [],
      curIndex: 0,
      tableData: [      ],
      swiperOption: {
        loop: false,
        spaceBetween: 40,
        slidesPerView: 8,
      },
      searchForm: {
        file_name: { value: '', op: 'like' },
        file_type: { value: '', op: 'like' },
        site_id: { value: '', op: '=' },
        status: { value: '1', op: '=' },
      },
      total: null,
      pageSize: 10,
      page: 1,
      loading: false,
      isFileNameClear: false, //是否显示清除按钮
      restaurants: []
    }
  },
  computed :{
    ...mapGetters([ 'curSite']),
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  components: { Swiper, SwiperSlide },
  created(){
    this.getFileTypeList()
    this.getList()
    this.getfileNameList()
  },
  watch: {
    curSite: function(){
      this.getFileTypeList()
      this.getList()
      this.getfileNameList()
    }
  },
  methods: {
    loseFocus() {
     this.$refs.input.activated = false;
    },
    isDetailsShow(item){
      item.details_show = !item.details_show
    },
    getfileNameList(){
       let siteID = this.curSite.id
      if(siteID){
        let params = {
          site_id: siteID
        }
        fileNameList(params).then(res=>{
          let data = res.data
          this.fileNameList = data;
        })
      }
    },
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i');
      if(val){
        return val.replace(Reg, function(match){
         return `<span class="keyword">${match}</span>`
        });
      }
    },
    querySearch(queryString, cb) {
      var fileNameList = this.fileNameList;
      var results = queryString ? fileNameList.filter(this.createFilter(queryString)) : fileNameList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
      };
    },
    clickTable(row,column, event){
      let target = event.target.outerHTML.indexOf('icon-Download') > -1
      if(!target){
        this.$refs.table.toggleRowExpansion(row)
      }
    },

    setCurSwiperItem(item,index){
      this.curItem = item
      this.curIndex = index
      if(this.searchForm.file_type.value == item.value) {
        this.searchForm.file_type.value = ''
      } else {
        this.searchForm.file_type.value  = item.value
      }
      let suggestion = document.getElementsByClassName("el-autocomplete-suggestion")[0].style.display != 'none'
      if(suggestion){
        this.$refs.input.handleClear()
      }
      this.searchData()
    },
    getMoreData(){
      if(this.tableData.length < this.total){
        this.page+=1
        this.getList()
      } else {
        console.log("no more")
      }
    },
    searchData(){
      this.page = 1
      for(let i = 0; i < this.fileTypeList.length; i++){
        if(this.fileTypeList[i].value == this.searchForm.value){
          this.curIndex = i
        }
      }
      this.getList()
    },
    // 获取文件类型
    getFileTypeList(){
      let siteID = this.curSite.id
      if(siteID){
        let params = {
          site_id: siteID
        }
        fileTypeList(params).then((res)=>{
          let list = res.data
          for(let i =0; i < list.length; i++){
            list[i].image = this.utils.setCdnUrl()+list[i].image
          }
          let screenWidth =document.body.clientWidth 
          if(screenWidth <= 1440){
            if(list.length > 8) {
              this.swiperOption =  {
                loop: false,
                spaceBetween: '1.5%',
                slidesPerView: 6,
              }
            } else {
              this.swiperOption =  {
                loop: false,
                spaceBetween: '1.5%',
                slidesPerView: 7,
              }
            }
          }  else {
            if(list.length > 8) {
              this.swiperOption =  {
                loop: false,
                spaceBetween: '2%',
                slidesPerView: 7,
              }
            } else {
              this.swiperOption =  {
                loop: false,
                spaceBetween: '2%',
                slidesPerView: 8,
              }
            }
          }
    
          this.$nextTick(()=>{
            this.$refs.mySwiper.initSwiper()

            })
          this.fileTypeList = list


        })
      }
     
    },
    getList(){
      this.loading = true
      let siteID = this.curSite.id
      if(siteID){
        this.searchForm.site_id.value = siteID
        let params = setSearchParams(this.searchForm, this.pageSize, this.page)
        list(params).then(res=>{
          let list = res.data
          for(let i = 0; i < list.data.length; i ++){
            list.data[i].file_size = formatFileSize(list.data[i].file_size)
            list.data[i].details_show = false
          }
          if(this.page == 1){
            this.tableData = list.data
          } else if(this.page > 1){
            this.tableData =this.tableData.concat(list.data) 
          }
          this.total = list.total
          this.loading = false
          this.swiperScrollBy()

        })
      }
    },
    slidePrev(){
      let index = 0
      if(this.curIndex > 0){
        index = this.curIndex - 1
      }
      this.curIndex = index
      this.setCurSwiperItem(this.fileTypeList[index],index)
    },
    slideNext(){
      let index  = this.fileTypeList.length - 1
      if (this.curIndex <  index) {
        index = this.curIndex + 1
      }
      this.curIndex = index
      this.setCurSwiperItem(this.fileTypeList[index],index)
    },
    swiperScrollBy (){ // swiper 保证当前选中显示在窗口内
      let sw = document.getElementsByClassName('swiper-container')
      let active = sw[0].getElementsByClassName('active')[0].offsetLeft
      sw[0].scroll({
        left: active,
        top: 0,
        behavior: 'smooth'
      });
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/support/download.scss';
</style>